<template>
  <div v-bind:class="{
    'modal':true,
    'fade':effect === 'fade',
    'zoom':effect === 'zoom'
  }" v-if="show" style="display:block"
    >
    <div v-bind:class="{'modal-dialog':true,'modal-lg':large,'modal-sm':small}" role="document"
      v-bind:style="{width: optionalWidth}">
      <div class="modal-content">
        <slot name="modal-header">
          <div class="modal-header">
            <button type="button" class="close" @click="close"><span>&times;</span></button>
            <h4 class="modal-title" >{{title}}</h4>
          </div>
        </slot>
        <slot name="modal-body">
          <div class="modal-body"></div>
        </slot>
        <slot name="modal-footer">
          <div class="modal-footer">
            <button type="button" class="btn btn-default" @click="close">Close</button>
            <button type="button" class="btn btn-primary" @click="callback">Save changes</button>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      isClose: {
        require: true,
        type: Boolean,
        twoWay: true
      },
      width: {
        default: null
      },
      callback: {
        type: Function,
        default() {}
      },
      effect: {
        type: String,
        default: null
      },
      backdrop: {
        type: Boolean,
        default: true
      },
      large: {
        type: Boolean,
        default: false
      },
      small: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      optionalWidth: function() {
        if( this.width === null ) {
          return null;
        } else {
          if( Number.isInteger(this.width) ) {
            return this.width + "px";
        }}
        return this.width;
      },
      show: function(){
        var body = document.body
        const el = this.$el
        if(this.isClose===false){
          body.classList.add('modal-open')
          // setTimeout(()=> el.classList.add('in'), 30)
          return true
        }
        if(el.classList!==undefined){
          // el.classList.remove('in')
          setTimeout(()=> {
            body.classList.remove('modal-open')
            body.style.paddingRight = '0'
          }, 300)
          return false
        }
      }
    },
    methods: {
      close() {
        this.isClose = true
      }
    }
  }
</script>
<style>
.modal {
  transition: all 0.3s ease;
}
.modal.in {
  background-color: rgba(0,0,0,0.5);
}
.modal.zoom .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.modal.zoom.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}
</style>
